<template>
  <view class="content">
    <!-- <img src="../static/head_portrait/tt.png" alt="糖"> -->
    <!-- <rank></rank> -->
    <view class="my-top">
      <view class="my-top-user">
        <view class="my-top-user-head">
          <img src="https://tjwmy.com/W%5B%29J%24EB%25~P7R8%25%29Y26F5DCK.bmp" alt="tang">
        </view>
        <view class="my-top-user-text">
          <view class="my-top-user-name">
            糖糖
          </view>
          <view class="my-top-user-birth">
            已经活了6570天
          </view>
        </view>
      </view>
      <view class="my-top-count">
        <view class="my-top-count-fav my-top-count-item">
          12<br>
          收藏
        </view>
        <view class="my-top-count-daily my-top-count-item">
          11
          <br>
          相册
        </view>
        <view class="my-top-count-photo my-top-count-item">
          22
          <br>
          日记
        </view>
      </view>
    </view>
    <view class="my-bottom">
      <view class="my-bottom-item" v-for="item in my_bottom">
        <view class="my-bottom-item-content">
          <uni-icons :type="item.icon" size="25"></uni-icons> <span>{{item.class}}</span>
        </view>
        <uni-icons type="forward" size="25"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        my_bottom: [{
            class: "动态",
            icon: "paperplane"
          },
          {
            class: "个人信息",
            icon: "person"
          }, {
            class: "收藏",
            icon: "star"
          }, {
            class: "消息",
            icon: "notification"
          }, {
            class: "历史",
            icon: "spinner-cycle"
          }, {
            class: "设置",
            icon: "tune"
          }
        ]
      };
    }
  }
</script>

<style lang="scss">
  .content {
    .my-top {
      height: 300rpx;
      width: 750rpx;
      background-color: white;

      .my-top-user {
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;

        .my-top-user-head {
          height: 150rpx;
          width: 150rpx;
          overflow: hidden;
          border-radius: 50%;
          background-color: white;

          img {
            width: 100%;
            height: 100%;

          }
        }

        .my-top-user-text {
          padding: 0 5%;
          height: 100%;
          width: 500rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;

          .my-top-user-name {
            height: 40%;
            width: 100%;
            display: flex;
            align-items: center;
          }

          .my-top-user-birth {
            height: 40%;
            width: 100%;
            display: flex;
            align-items: center;

            font: {
              size: 24rpx
            }
          }
        }
      }

      .my-top-count {
        width: 100%;
        height: 40%;
        display: flex;
        justify-content: center;
        align-items: center;

        .my-top-count-item {
          border-left: 1px solid rgba(0, 0, 0, 0.1);
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
          width: 30%;
          height: 100%;
        }

        .my-top-count-item:nth-child(1) {
          border: none;
        }
      }
    }

    .my-bottom {
      margin-top: 30rpx;
      height: 600rpx;
      width: 750rpx;
      background-color: white;

      .my-bottom-item {
        padding: 0 5%;
        height: 100rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .my-bottom-item-content {
          display: flex;
          align-items: center;

          font: {
            size: 32rpx;
          }

          span {
            margin-left: 10rpx;
          }
        }
      }
    }
  }
</style>
